@extends('admin.common.main')

@section('css')
    {{--    webuploader上传样式--}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@endsection

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 房东管理
        <span class="c-gray en">&gt;</span> 添加房东
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
{{--        表单验证提示--}}
        @include('admin.common.errors')
        <form action="{{ route('admin.fangowner.store') }}" method="post" class="form form-horizontal" id="form-fangowner-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="name" value="{{ old('name') }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="age">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="card">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="address">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" id="sex-1" value="男" checked>
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" name="sex" value="女">
                        <label for="sex-2">女</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
                <div class="formControls col-xs-2 col-sm-2">
                    <div id="webuploader_picker">身份证照片</div>
                    <span>正面、反面、手持</span>
                </div>
                <div class="formControls col-xs-6 col-sm-27">
                    <input type="hidden" name="pic" id="pic" />
                    <div id="imglist"></div>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房东">
                </div>
            </div>
        </form>
    </article>
@endsection

@section('js')
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript">
        //单选框样式
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        //webuploader
        var uploader = WebUploader.create({
            //选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端。 上传PHP的代码
            server: '{{ route('admin.fangowner.upfile') }}',
            //文件上传时携带的参数
            formData:{
                _token: '{{ csrf_token() }}'
            },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true,
            //文件上传时的表单名称,后端$request->hasFile('file')
            fileVal: 'file',
            pick: {
                id: '#webuploader_picker',
                //是否开启选择多个文件的能力(身份证多张正反手持)
                multiple: true,

            },
            //可重复上传同一张（）
            duplicate: true
        });

        uploader.on( 'uploadSuccess', function( file, ret ) {
            //图片路径 拼接三张图片的返回地址
            //表单中设置一个隐藏域，在每次上传成功后，使用字符串拼接，接成一个字符串，这样在表单提交时就是一个以#隔开的图片字符串。
            let val = $('#pic').val()
            let tmp = val + '#' + ret.url;
            $('#pic').val(tmp)

            //图片显示，每次返回图片地址追加一下
            let imglist = $('#imglist')
            //imglist.append(`<img src="${ret.url}" style="width: 100px;"/>&nbsp;&nbsp;&nbsp;`)
            let html = `
                <div style="position: relative; width: 100px;">
                    <img src="${ret.url}" style="width:100px;" />
                    <strong onclick="delpic(this, '${ret.url}')" style="position: absolute; right: 2px; top: 2px; color: white; font-size: 20px;">X</strong>
                </div>
            `;
            imglist.append(html);
        });

        //处理点击X删除上传了的照片
        function delpic(obj, picurl) {
            //用get上传
            let url = "{{ route('admin.fangowner.delfile') }}?file=" + picurl;
            console.log(url);
            //发起请求删除
            fetch(url).then(({status, msg}) => {})
            //删除当前点击图片显示
            $(obj).parent().remove()
            //修改隐藏域表单
            let tmp = $('#pic').val().replace(`#${picurl}`, '')
            $('#pic').val(tmp)
        };

        //表单验证
        $("#form-fangowner-add").validate({
            rules:{
                name:{
                    required:true,
                },
                card:{
                    required:true,
                },
                phone:{
                    required:true,
                    myphone:true,  //这是下面自定义
                    isMobile:true,
                },
                email:{
                    required:true,
                    email:true,
                },

            },
            messages: {
                truename: {
                    required: '我自己定义的，真实名字必须要写!!!!'
                }
            },
            onkeyup:false, //回车不能提交
            success:"valid", //成功时的样式
            //验证通过后的处理方法
            submitHandler:function(form){
                //form是dom对象
                form.submit();
            }
        });

        //自定义验证规则
        jQuery.validator.addMethod("myphone", function(value, element) {
            //+86-
            var reg1 = /^\+86-1[3-9]\d{9}$/; //带+86-的
            var reg2 = /^1[3-9]\d{9}$/;      //不带+86-的
            var ret = reg1.test(value) || reg2.test(value);
            return this.optional(element) || ret;
        }, "请输入正确的手机号码");
    </script>
@endsection
